
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>LRU算法 · 👨🏽‍💻前端漫游指南</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="WuXiaolong">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-toggle-chapters/toggle.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-plus/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="链表原来如此简单.html" />
    
    
    <link rel="prev" href="从Chrome V8源码看JavaScript数组.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                        <b>1.1.</b>
                    
                    介绍
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../Base/">
            
                <a href="../Base/">
            
                    
                        <b>1.2.</b>
                    
                    前端基础
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../Base/">
            
                <a href="../Base/">
            
                    
                        <b>1.2.1.</b>
                    
                    原生js系列
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1.1" data-path="../Base/手写call1.html">
            
                <a href="../Base/手写call1.html">
            
                    
                        <b>1.2.1.1.</b>
                    
                    类型转换
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.1.2" data-path="../Base/EventLoop.html">
            
                <a href="../Base/EventLoop.html">
            
                    
                        <b>1.2.1.2.</b>
                    
                    EventLoop
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../Base/CSS.html">
            
                <a href="../Base/CSS.html">
            
                    
                        <b>1.2.2.</b>
                    
                    CSS系列
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.2.1" data-path="../Base/布局系列.html">
            
                <a href="../Base/布局系列.html">
            
                    
                        <b>1.2.2.1.</b>
                    
                    布局系列
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../Design/">
            
                <a href="../Design/">
            
                    
                        <b>1.3.</b>
                    
                    前端设计模式
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../Design/工程模式.html">
            
                <a href="../Design/工程模式.html">
            
                    
                        <b>1.3.1.</b>
                    
                    工厂模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../Design/单一模式.html">
            
                <a href="../Design/单一模式.html">
            
                    
                        <b>1.3.2.</b>
                    
                    单一模式
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../DiyCode/">
            
                <a href="../DiyCode/">
            
                    
                        <b>1.4.</b>
                    
                    手撕代码
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../DiyCode/手写call.html">
            
                <a href="../DiyCode/手写call.html">
            
                    
                        <b>1.4.1.</b>
                    
                    手写call
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../DiyCode/手写bind.html">
            
                <a href="../DiyCode/手写bind.html">
            
                    
                        <b>1.4.2.</b>
                    
                    手写bind
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="./">
            
                <a href="./">
            
                    
                        <b>1.5.</b>
                    
                    前端算法
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="前端算法.html">
            
                <a href="前端算法.html">
            
                    
                        <b>1.5.1.</b>
                    
                    前端算法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="统计算法的执行效率和资源消耗.html">
            
                <a href="统计算法的执行效率和资源消耗.html">
            
                    
                        <b>1.5.2.</b>
                    
                    统计算法的执行效率和资源消耗
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="从Chrome V8源码看JavaScript数组.html">
            
                <a href="从Chrome V8源码看JavaScript数组.html">
            
                    
                        <b>1.5.3.</b>
                    
                    从Chrome V8源码看JavaScript数组
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.4" data-path="LRU算法.html">
            
                <a href="LRU算法.html">
            
                    
                        <b>1.5.4.</b>
                    
                    LRU算法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="链表原来如此简单.html">
            
                <a href="链表原来如此简单.html">
            
                    
                        <b>1.5.5.</b>
                    
                    链表原来如此简单
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../Vue/">
            
                <a href="../Vue/">
            
                    
                        <b>1.6.</b>
                    
                    Vue知识点
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../Vue/Proxy 基本使用与defineProperty.html">
            
                <a href="../Vue/Proxy 基本使用与defineProperty.html">
            
                    
                        <b>1.6.1.</b>
                    
                    Proxy 基本使用与defineProperty
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../Vue/面试题串讲_vue.html">
            
                <a href="../Vue/面试题串讲_vue.html">
            
                    
                        <b>1.6.2.</b>
                    
                    面试题串讲_vue
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../React/">
            
                <a href="../React/">
            
                    
                        <b>1.7.</b>
                    
                    React知识点
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.7.1" data-path="../React/setState解析.html">
            
                <a href="../React/setState解析.html">
            
                    
                        <b>1.7.1.</b>
                    
                    setState解析
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.2" data-path="../React/Fetch异步中止.html">
            
                <a href="../React/Fetch异步中止.html">
            
                    
                        <b>1.7.2.</b>
                    
                    Fetch异步中止
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.3" data-path="../React/面试题串讲_react.html">
            
                <a href="../React/面试题串讲_react.html">
            
                    
                        <b>1.7.3.</b>
                    
                    面试题串讲_react
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../ReactNative/">
            
                <a href="../ReactNative/">
            
                    
                        <b>1.8.</b>
                    
                    ReactNative
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.8.1" data-path="../ReactNative/RN分包机制.html">
            
                <a href="../ReactNative/RN分包机制.html">
            
                    
                        <b>1.8.1.</b>
                    
                    RN分包机制
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >LRU算法</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div class="search-plus" id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="lru&#x7B97;&#x6CD5;">LRU&#x7B97;&#x6CD5;</h1>
<h3 id="&#x5F15;&#x8A00;">&#x5F15;&#x8A00;</h3>
<p>&#x8FD9;&#x4E2A;&#x6807;&#x9898;&#x5DF2;&#x7ECF;&#x5F88;&#x660E;&#x663E;&#x7684;&#x544A;&#x8BC9;&#x6211;&#x4EEC;&#xFF1A;&#x524D;&#x7AEF;&#x9700;&#x8981;&#x4E86;&#x89E3; LRU &#x7B97;&#x6CD5;&#xFF01;</p>
<p>&#x8FD9;&#x4E5F;&#x662F;&#x524D;&#x7AEF;&#x6280;&#x80FD;&#x7684;&#x4EAE;&#x70B9;&#xFF0C;&#x5F53;&#x9762;&#x8BD5;&#x5B98;&#x5728;&#x95EE;&#x5230;&#x4F60;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x4E2D;&#x9047;&#x5230;&#x8FC7;&#x54EA;&#x4E9B;&#x7B97;&#x6CD5;&#xFF0C;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x628A;&#x8FD9;&#x90E8;&#x5206;&#x4E22;&#x8FC7;&#x53BB;&#xFF01;</p>
<p>&#x672C;&#x8282;&#x6309;&#x4EE5;&#x4E0B;&#x6B65;&#x9AA4;&#x5207;&#x5165;&#xFF1A;</p>
<ul>
<li>&#x7531;&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;&#x7B56;&#x7565;&#x5F15;&#x51FA; LRU &#x7B97;&#x6CD5;&#x539F;&#x7406;</li>
<li>&#x7136;&#x540E;&#x8D70;&#x8FDB; <code>vue</code> &#x4E2D; <code>keep-alive</code> &#x7684;&#x5E94;&#x7528;</li>
<li>&#x63A5;&#x7740;&#xFF0C;&#x900F;&#x8FC7; <code>vue</code> &#x4E2D; <code>keep-alive</code> &#x6E90;&#x7801;&#x770B; <code>LRU</code> &#x7B97;&#x6CD5;&#x7684;&#x5B9E;&#x73B0;</li>
<li>&#x6700;&#x540E;&#xFF0C;&#x6765;&#x4E00;&#x9053; leetcode &#x9898;&#x76EE;&#xFF0C;&#x6211;&#x4EEC;&#x6765;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A; LRU &#x7B97;&#x6CD5;</li>
</ul>
<p>&#x6309;&#x8FD9;&#x4E2A;&#x6B65;&#x9AA4;&#x6765;&#xFF0C;&#x5B8C;&#x5168;&#x638C;&#x63E1; LRU &#x7B97;&#x6CD5;&#xFF0C;&#x70B9;&#x4EAE;&#x524D;&#x7AEF;&#x6280;&#x80FD;&#xFF0C;&#x4E0B;&#x9762;&#x5C31;&#x5F00;&#x59CB;&#x5427;&#x1F447;</p>
<h3 id="&#x4E00;&#x3001;lru-&#x7F13;&#x5B58;&#x6DD8;&#x6C70;&#x7B56;&#x7565;">&#x4E00;&#x3001;LRU &#x7F13;&#x5B58;&#x6DD8;&#x6C70;&#x7B56;&#x7565;</h3>
<p><strong>&#x7F13;&#x5B58;</strong>&#x5728;&#x8BA1;&#x7B97;&#x673A;&#x7F51;&#x7EDC;&#x4E0A;&#x968F;&#x5904;&#x53EF;&#x89C1;&#xFF0C;&#x4F8B;&#x5982;&#xFF1A;&#x5F53;&#x6211;&#x4EEC;&#x9996;&#x6B21;&#x8BBF;&#x95EE;&#x4E00;&#x4E2A;&#x7F51;&#x9875;&#x65F6;&#xFF0C;&#x6253;&#x5F00;&#x5F88;&#x6162;&#xFF0C;&#x4F46;&#x5F53;&#x6211;&#x4EEC;&#x518D;&#x6B21;&#x6253;&#x5F00;&#x8FD9;&#x4E2A;&#x7F51;&#x9875;&#x65F6;&#xFF0C;&#x6253;&#x5F00;&#x5C31;&#x5F88;&#x5FEB;&#x3002;</p>
<p>&#x8FD9;&#x5C31;&#x6D89;&#x53CA;&#x7F13;&#x5B58;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E0A;&#x7684;&#x5E94;&#x7528;&#xFF1A;<strong>&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;</strong>&#x3002;&#x5F53;&#x6211;&#x4EEC;&#x6253;&#x5F00;&#x4E00;&#x4E2A;&#x7F51;&#x9875;&#x65F6;&#xFF0C;&#x4F8B;&#x5982; <code>https://github.com/sisterAn/JavaScript-Algorithms</code> &#xFF0C;&#x5B83;&#x4F1A;&#x5728;&#x53D1;&#x8D77;&#x771F;&#x6B63;&#x7684;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x524D;&#xFF0C;&#x67E5;&#x8BE2;&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;&#xFF0C;&#x770B;&#x662F;&#x5426;&#x6709;&#x8981;&#x8BF7;&#x6C42;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x5982;&#x679C;&#x6709;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x5C06;&#x4F1A;&#x62E6;&#x622A;&#x8BF7;&#x6C42;&#xFF0C;&#x8FD4;&#x56DE;&#x7F13;&#x5B58;&#x6587;&#x4EF6;&#xFF0C;&#x5E76;&#x76F4;&#x63A5;&#x7ED3;&#x675F;&#x8BF7;&#x6C42;&#xFF0C;&#x4E0D;&#x4F1A;&#x518D;&#x53BB;&#x670D;&#x52A1;&#x5668;&#x4E0A;&#x4E0B;&#x8F7D;&#x3002;&#x5982;&#x679C;&#x4E0D;&#x5B58;&#x5728;&#xFF0C;&#x624D;&#x4F1A;&#x53BB;&#x670D;&#x52A1;&#x5668;&#x8BF7;&#x6C42;&#x3002;</p>
<p>&#x5176;&#x5B9E;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x7684;&#x7F13;&#x5B58;&#x662F;&#x4E00;&#x79CD;&#x5728;&#x672C;&#x5730;&#x4FDD;&#x5B58;&#x8D44;&#x6E90;&#x526F;&#x672C;&#xFF0C;&#x5B83;&#x7684;&#x5927;&#x5C0F;&#x662F;&#x6709;&#x9650;&#x7684;&#xFF0C;&#x5F53;&#x6211;&#x4EEC;&#x8BF7;&#x6C42;&#x6570;&#x8FC7;&#x591A;&#x65F6;&#xFF0C;&#x7F13;&#x5B58;&#x7A7A;&#x95F4;&#x4F1A;&#x88AB;&#x7528;&#x6EE1;&#xFF0C;&#x6B64;&#x65F6;&#xFF0C;&#x7EE7;&#x7EED;&#x8FDB;&#x884C;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x5C31;&#x9700;&#x8981;&#x786E;&#x5B9A;&#x7F13;&#x5B58;&#x4E2D;&#x54EA;&#x4E9B;&#x6570;&#x636E;&#x88AB;&#x4FDD;&#x7559;&#xFF0C;&#x54EA;&#x4E9B;&#x6570;&#x636E;&#x88AB;&#x79FB;&#x9664;&#xFF0C;&#x8FD9;&#x5C31;&#x662F;<strong>&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;&#x6DD8;&#x6C70;&#x7B56;&#x7565;</strong>&#xFF0C;&#x6700;&#x5E38;&#x89C1;&#x7684;&#x6DD8;&#x6C70;&#x7B56;&#x7565;&#x6709; FIFO&#xFF08;&#x5148;&#x8FDB;&#x5148;&#x51FA;&#xFF09;&#x3001;LFU&#xFF08;&#x6700;&#x5C11;&#x4F7F;&#x7528;&#xFF09;&#x3001;LRU&#xFF08;&#x6700;&#x8FD1;&#x6700;&#x5C11;&#x4F7F;&#x7528;&#xFF09;&#x3002;</p>
<p>LRU &#xFF08; <code>Least Recently Used</code> &#xFF1A;==&#x6700;&#x8FD1;&#x6700;&#x5C11;&#x4F7F;&#x7528;== &#xFF09;&#x7F13;&#x5B58;&#x6DD8;&#x6C70;&#x7B56;&#x7565;&#xFF0C;&#x6545;&#x540D;&#x601D;&#x4E49;&#xFF0C;&#x5C31;&#x662F;&#x6839;&#x636E;&#x6570;&#x636E;&#x7684;&#x5386;&#x53F2;&#x8BBF;&#x95EE;&#x8BB0;&#x5F55;&#x6765;&#x8FDB;&#x884C;&#x6DD8;&#x6C70;&#x6570;&#x636E;&#xFF0C;&#x5176;&#x6838;&#x5FC3;&#x601D;&#x60F3;&#x662F; <strong>&#x5982;&#x679C;&#x6570;&#x636E;&#x6700;&#x8FD1;&#x88AB;&#x8BBF;&#x95EE;&#x8FC7;&#xFF0C;&#x90A3;&#x4E48;&#x5C06;&#x6765;&#x88AB;&#x8BBF;&#x95EE;&#x7684;&#x51E0;&#x7387;&#x4E5F;&#x66F4;&#x9AD8;</strong> &#xFF0C;&#x4F18;&#x5148;&#x6DD8;&#x6C70;&#x6700;&#x8FD1;&#x6CA1;&#x6709;&#x88AB;&#x8BBF;&#x95EE;&#x5230;&#x7684;&#x6570;&#x636E;&#x3002;</p>
<p>&#x753B;&#x4E2A;&#x56FE;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x7406;&#x89E3;&#xFF1A;</p>
<p><a href="https://camo.githubusercontent.com/a06af57cca996cf2f3a7b80f1619ed3842c119fd/687474703a2f2f7265736f757263652e6d757969792e636e2f696d6167652f32303230303430363230353234372e706e67" target="_blank"><img src="../Users/lovewcc/Documents/Gitbook/Algorithm/687474703a2f2f7265736f757263652e6d757969792e636e2f696d6167652f32303230303430363230353234372e706e67.png" alt="img"></a></p>
<h3 id="&#x4E8C;&#x3001;lru-&#x5728;-keep-alive-vue-&#x4E0A;&#x7684;&#x5B9E;&#x73B0;">&#x4E8C;&#x3001;LRU &#x5728; keep-alive (Vue) &#x4E0A;&#x7684;&#x5B9E;&#x73B0;</h3>
<h4 id="1-keep-alive">1. keep-alive</h4>
<p>keep-alive &#x5728; vue &#x4E2D;&#x7528;&#x4E8E;&#x5B9E;&#x73B0;&#x7EC4;&#x4EF6;&#x7684;&#x7F13;&#x5B58;&#xFF0C;&#x5F53;&#x7EC4;&#x4EF6;&#x5207;&#x6362;&#x65F6;&#x4E0D;&#x4F1A;&#x5BF9;&#x5F53;&#x524D;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x5378;&#x8F7D;&#x3002;</p>
<pre class="language-"><code><span class="token comment">&lt;!-- &#x57FA;&#x672C; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>&#x6700;&#x5E38;&#x7528;&#x7684;&#x4E24;&#x4E2A;&#x5C5E;&#x6027;&#xFF1A;<code>include</code> &#x3001; <code>exculde</code> &#xFF0C;&#x7528;&#x4E8E;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x6709;&#x6761;&#x4EF6;&#x7684;&#x7F13;&#x5B58;&#xFF0C;&#x53EF;&#x4EE5;&#x7528;&#x9017;&#x53F7;&#x5206;&#x9694;&#x5B57;&#x7B26;&#x4E32;&#x3001;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;&#x6216;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;&#x6765;&#x8868;&#x793A;&#x3002;</p>
<p>&#x5728; 2.5.0 &#x7248;&#x672C;&#x4E2D;&#xFF0C;<code>keep-alive</code> &#x65B0;&#x589E;&#x4E86; <code>max</code> &#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x6700;&#x591A;&#x53EF;&#x4EE5;&#x7F13;&#x5B58;&#x591A;&#x5C11;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#xFF0C;&#x4E00;&#x65E6;&#x8FD9;&#x4E2A;&#x6570;&#x5B57;&#x8FBE;&#x5230;&#x4E86;&#xFF0C;&#x5728;&#x65B0;&#x5B9E;&#x4F8B;&#x88AB;&#x521B;&#x5EFA;&#x4E4B;&#x524D;&#xFF0C;&#x5DF2;&#x7F13;&#x5B58;&#x7EC4;&#x4EF6;&#x4E2D;&#x6700;&#x4E45;&#x6CA1;&#x6709;&#x88AB;&#x8BBF;&#x95EE;&#x7684;&#x5B9E;&#x4F8B;&#x4F1A;&#x88AB;&#x9500;&#x6BC1;&#x6389;&#xFF0C;<strong>&#x770B;&#xFF0C;&#x8FD9;&#x91CC;&#x5C31;&#x5E94;&#x7528;&#x4E86; LRU &#x7B97;&#x6CD5;</strong>&#x3002;&#x5373;&#x5728; <code>keep-alive</code> &#x4E2D;&#x7F13;&#x5B58;&#x8FBE;&#x5230; <code>max</code>&#xFF0C;&#x65B0;&#x589E;&#x7F13;&#x5B58;&#x5B9E;&#x4F8B;&#x4F1A;&#x4F18;&#x5148;&#x6DD8;&#x6C70;&#x6700;&#x8FD1;&#x6CA1;&#x6709;&#x88AB;&#x8BBF;&#x95EE;&#x5230;&#x7684;&#x5B9E;&#x4F8B;&#x1F389;&#x1F389;&#x1F389;</p>
<p>&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x900F;&#x8FC7; vue &#x6E90;&#x7801;&#x770B;&#x4E00;&#x4E0B;&#x5177;&#x4F53;&#x7684;&#x5B9E;&#x73B0;&#x1F447;</p>
<h3 id="2-&#x4ECE;-vue-&#x6E90;&#x7801;&#x770B;-keep-alive-&#x7684;&#x5B9E;&#x73B0;">2. &#x4ECE; vue &#x6E90;&#x7801;&#x770B; keep-alive &#x7684;&#x5B9E;&#x73B0;</h3>
<pre class="language-"><code class="lang-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;keep-alive&quot;</span><span class="token punctuation">,</span>
  <span class="token comment">// &#x62BD;&#x8C61;&#x7EC4;&#x4EF6;&#x5C5E;&#x6027; ,&#x5B83;&#x5728;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x5EFA;&#x7ACB;&#x7236;&#x5B50;&#x5173;&#x7CFB;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x88AB;&#x5FFD;&#x7565;,&#x53D1;&#x751F;&#x5728; initLifecycle &#x7684;&#x8FC7;&#x7A0B;&#x4E2D;</span>
  abstract<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> 
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// &#x88AB;&#x7F13;&#x5B58;&#x7EC4;&#x4EF6;</span>
    include<span class="token operator">:</span> patternTypes<span class="token punctuation">,</span> 
    <span class="token comment">// &#x4E0D;&#x88AB;&#x7F13;&#x5B58;&#x7EC4;&#x4EF6;</span>
    exclude<span class="token operator">:</span> patternTypes<span class="token punctuation">,</span>
    <span class="token comment">// &#x6307;&#x5B9A;&#x7F13;&#x5B58;&#x5927;&#x5C0F;</span>
    max<span class="token operator">:</span> <span class="token punctuation">[</span>String<span class="token punctuation">,</span> Number<span class="token punctuation">]</span> 
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// &#x521D;&#x59CB;&#x5316;&#x7528;&#x4E8E;&#x5B58;&#x50A8;&#x7F13;&#x5B58;&#x7684; cache &#x5BF9;&#x8C61;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>cache <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// &#x521D;&#x59CB;&#x5316;&#x7528;&#x4E8E;&#x5B58;&#x50A8;VNode key&#x503C;&#x7684; keys &#x6570;&#x7EC4;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>keys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">destroyed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">in</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cache<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// &#x5220;&#x9664;&#x6240;&#x6709;&#x7F13;&#x5B58;</span>
      <span class="token function">pruneCacheEntry</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cache<span class="token punctuation">,</span> key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keys<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// &#x76D1;&#x542C;&#x7F13;&#x5B58;&#xFF08;include&#xFF09;/&#x4E0D;&#x7F13;&#x5B58;&#xFF08;exclude&#xFF09;&#x7EC4;&#x4EF6;&#x7684;&#x53D8;&#x5316;</span>
    <span class="token comment">// &#x5728;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x91CD;&#x65B0;&#x8C03;&#x6574; cache</span>
    <span class="token comment">// pruneCache&#xFF1A;&#x904D;&#x5386; cache&#xFF0C;&#x5982;&#x679C;&#x7F13;&#x5B58;&#x7684;&#x8282;&#x70B9;&#x540D;&#x79F0;&#x4E0E;&#x4F20;&#x5165;&#x7684;&#x89C4;&#x5219;&#x6CA1;&#x6709;&#x5339;&#x914D;&#x4E0A;&#x7684;&#x8BDD;&#xFF0C;&#x5C31;&#x628A;&#x8FD9;&#x4E2A;&#x8282;&#x70B9;&#x4ECE;&#x7F13;&#x5B58;&#x4E2D;&#x79FB;&#x9664;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">&quot;include&quot;</span><span class="token punctuation">,</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">pruneCache</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token function">matches</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">&quot;exclude&quot;</span><span class="token punctuation">,</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">pruneCache</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span><span class="token function">matches</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// &#x83B7;&#x53D6;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x7684; vnode</span>
    <span class="token keyword">const</span> slot <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$slots<span class="token punctuation">.</span>default<span class="token punctuation">;</span>
    <span class="token keyword">const</span> vnode<span class="token operator">:</span> VNode <span class="token operator">=</span> <span class="token function">getFirstComponentChild</span><span class="token punctuation">(</span>slot<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> componentOptions<span class="token operator">:</span> <span class="token operator">?</span>VNodeComponentOptions <span class="token operator">=</span>
      vnode <span class="token operator">&amp;&amp;</span> vnode<span class="token punctuation">.</span>componentOptions<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>componentOptions<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// name &#x4E0D;&#x5728; inlcude &#x4E2D;&#x6216;&#x8005;&#x5728; exlude &#x4E2D;&#x5219;&#x76F4;&#x63A5;&#x8FD4;&#x56DE; vnode&#xFF0C;&#x5426;&#x5219;&#x7EE7;&#x7EED;&#x8FDB;&#x884C;&#x4E0B;&#x4E00;&#x6B65;</span>
      <span class="token comment">// check pattern</span>
      <span class="token keyword">const</span> name<span class="token operator">:</span> <span class="token operator">?</span>string <span class="token operator">=</span> <span class="token function">getComponentName</span><span class="token punctuation">(</span>componentOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> include<span class="token punctuation">,</span> exclude <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>
        <span class="token comment">// not included</span>
        <span class="token punctuation">(</span>include <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span><span class="token operator">!</span>name <span class="token operator">||</span> <span class="token operator">!</span><span class="token function">matches</span><span class="token punctuation">(</span>include<span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span>
        <span class="token comment">// excluded</span>
        <span class="token punctuation">(</span>exclude <span class="token operator">&amp;&amp;</span> name <span class="token operator">&amp;&amp;</span> <span class="token function">matches</span><span class="token punctuation">(</span>exclude<span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> vnode<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">const</span> <span class="token punctuation">{</span> cache<span class="token punctuation">,</span> keys <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
      <span class="token comment">// &#x83B7;&#x53D6;&#x952E;&#xFF0C;&#x4F18;&#x5148;&#x83B7;&#x53D6;&#x7EC4;&#x4EF6;&#x7684; name &#x5B57;&#x6BB5;&#xFF0C;&#x5426;&#x5219;&#x662F;&#x7EC4;&#x4EF6;&#x7684; tag</span>
      <span class="token keyword">const</span> key<span class="token operator">:</span> <span class="token operator">?</span>string <span class="token operator">=</span>
        vnode<span class="token punctuation">.</span>key <span class="token operator">==</span> <span class="token keyword">null</span>
          <span class="token operator">?</span> <span class="token comment">// same constructor may get registered as different local components</span>
            <span class="token comment">// so cid alone is not enough (#3269)</span>
            componentOptions<span class="token punctuation">.</span>Ctor<span class="token punctuation">.</span>cid <span class="token operator">+</span>
            <span class="token punctuation">(</span>componentOptions<span class="token punctuation">.</span>tag <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">::</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>componentOptions<span class="token punctuation">.</span>tag<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span>
          <span class="token operator">:</span> vnode<span class="token punctuation">.</span>key<span class="token punctuation">;</span>

      <span class="token comment">// --------------------------------------------------</span>
      <span class="token comment">// &#x4E0B;&#x9762;&#x5C31;&#x662F; LRU &#x7B97;&#x6CD5;&#x4E86;&#xFF0C;</span>
      <span class="token comment">// &#x5982;&#x679C;&#x5728;&#x7F13;&#x5B58;&#x91CC;&#x6709;&#x5219;&#x8C03;&#x6574;&#xFF0C;</span>
      <span class="token comment">// &#x6CA1;&#x6709;&#x5219;&#x653E;&#x5165;&#xFF08;&#x957F;&#x5EA6;&#x8D85;&#x8FC7; max&#xFF0C;&#x5219;&#x6DD8;&#x6C70;&#x6700;&#x8FD1;&#x6CA1;&#x6709;&#x8BBF;&#x95EE;&#x7684;&#xFF09;</span>
      <span class="token comment">// --------------------------------------------------</span>
      <span class="token comment">// &#x5982;&#x679C;&#x547D;&#x4E2D;&#x7F13;&#x5B58;&#xFF0C;&#x5219;&#x4ECE;&#x7F13;&#x5B58;&#x4E2D;&#x83B7;&#x53D6; vnode &#x7684;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#xFF0C;&#x5E76;&#x4E14;&#x8C03;&#x6574; key &#x7684;&#x987A;&#x5E8F;&#x653E;&#x5165; keys &#x6570;&#x7EC4;&#x7684;&#x672B;&#x5C3E;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>cache<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        vnode<span class="token punctuation">.</span>componentInstance <span class="token operator">=</span> cache<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>componentInstance<span class="token punctuation">;</span>
        <span class="token comment">// make current key freshest</span>
        <span class="token function">remove</span><span class="token punctuation">(</span>keys<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>
        keys<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token comment">// &#x5982;&#x679C;&#x6CA1;&#x6709;&#x547D;&#x4E2D;&#x7F13;&#x5B58;,&#x5C31;&#x628A; vnode &#x653E;&#x8FDB;&#x7F13;&#x5B58;</span>
      <span class="token keyword">else</span> <span class="token punctuation">{</span>
        cache<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> vnode<span class="token punctuation">;</span>
        keys<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// prune oldest entry</span>
        <span class="token comment">// &#x5982;&#x679C;&#x914D;&#x7F6E;&#x4E86; max &#x5E76;&#x4E14;&#x7F13;&#x5B58;&#x7684;&#x957F;&#x5EA6;&#x8D85;&#x8FC7;&#x4E86; this.max&#xFF0C;&#x8FD8;&#x8981;&#x4ECE;&#x7F13;&#x5B58;&#x4E2D;&#x5220;&#x9664;&#x7B2C;&#x4E00;&#x4E2A;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>max <span class="token operator">&amp;&amp;</span> keys<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>max<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">pruneCacheEntry</span><span class="token punctuation">(</span>cache<span class="token punctuation">,</span> keys<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> keys<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_vnode<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>

      <span class="token comment">// keepAlive&#x6807;&#x8BB0;&#x4F4D;</span>
      vnode<span class="token punctuation">.</span>data<span class="token punctuation">.</span>keepAlive <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> vnode <span class="token operator">||</span> <span class="token punctuation">(</span>slot <span class="token operator">&amp;&amp;</span> slot<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// &#x79FB;&#x9664; key &#x7F13;&#x5B58;</span>
<span class="token keyword">function</span> <span class="token function">pruneCacheEntry</span> <span class="token punctuation">(</span>
  <span class="token parameter">cache<span class="token operator">:</span> VNodeCache<span class="token punctuation">,</span>
  key<span class="token operator">:</span> string<span class="token punctuation">,</span>
  keys<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  current<span class="token operator">?</span><span class="token operator">:</span> VNode</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> cached <span class="token operator">=</span> cache<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>cached <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span><span class="token operator">!</span>current <span class="token operator">||</span> cached<span class="token punctuation">.</span>tag <span class="token operator">!==</span> current<span class="token punctuation">.</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    cached<span class="token punctuation">.</span>componentInstance<span class="token punctuation">.</span><span class="token function">$destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  cache<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span>
  <span class="token function">remove</span><span class="token punctuation">(</span>keys<span class="token punctuation">,</span> key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// remove &#x65B9;&#x6CD5;&#xFF08;shared/util.js&#xFF09;</span>
<span class="token comment">/**
 * Remove an item from an array.
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">remove</span> <span class="token punctuation">(</span><span class="token parameter">arr<span class="token operator">:</span> Array<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span><span class="token punctuation">,</span> item<span class="token operator">:</span> any</span><span class="token punctuation">)</span><span class="token operator">:</span> Array<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> index <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><a href="https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js" target="_blank">keep-alive&#x6E90;&#x7801;&#x8DEF;&#x5F84;</a></p>
<p>&#x5728; <code>keep-alive</code> &#x7F13;&#x5B58;&#x8D85;&#x8FC7; <code>max</code> &#x65F6;&#xFF0C;&#x4F7F;&#x7528;&#x7684;&#x7F13;&#x5B58;&#x6DD8;&#x6C70;&#x7B97;&#x6CD5;&#x5C31;&#x662F; LRU &#x7B97;&#x6CD5;&#xFF0C;&#x5B83;&#x5728;&#x5B9E;&#x73B0;&#x7684;&#x8FC7;&#x7A0B;&#x4E2D;&#x7528;&#x5230;&#x4E86; <code>cache</code> &#x5BF9;&#x8C61;&#x7528;&#x4E8E;&#x4FDD;&#x5B58;&#x7F13;&#x5B58;&#x7684;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x53CA; <code>key</code> &#x503C;&#xFF0C;<code>keys</code> &#x6570;&#x7EC4;&#x7528;&#x4E8E;&#x4FDD;&#x5B58;&#x7F13;&#x5B58;&#x7EC4;&#x4EF6;&#x7684; <code>key</code> &#xFF0C;&#x5F53; <code>keep-alive</code> &#x4E2D;&#x6E32;&#x67D3;&#x4E00;&#x4E2A;&#x9700;&#x8981;&#x7F13;&#x5B58;&#x7684;&#x5B9E;&#x4F8B;&#x65F6;&#xFF1A;</p>
<ul>
<li>&#x5224;&#x65AD;&#x7F13;&#x5B58;&#x4E2D;&#x662F;&#x5426;&#x5DF2;&#x7F13;&#x5B58;&#x4E86;&#x8BE5;&#x5B9E;&#x4F8B;&#xFF0C;&#x7F13;&#x5B58;&#x4E86;&#x5219;&#x76F4;&#x63A5;&#x83B7;&#x53D6;&#xFF0C;&#x5E76;&#x8C03;&#x6574; <code>key</code> &#x5728; <code>keys</code> &#x4E2D;&#x7684;&#x4F4D;&#x7F6E;&#xFF08;&#x79FB;&#x9664; <code>keys</code> &#x4E2D; <code>key</code> &#xFF0C;&#x5E76;&#x653E;&#x5165; <code>keys</code> &#x6570;&#x7EC4;&#x7684;&#x6700;&#x540E;&#x4E00;&#x4F4D;&#xFF09;</li>
<li>&#x5982;&#x679C;&#x6CA1;&#x6709;&#x7F13;&#x5B58;&#xFF0C;&#x5219;&#x7F13;&#x5B58;&#x8BE5;&#x5B9E;&#x4F8B;&#xFF0C;&#x82E5; <code>keys</code> &#x7684;&#x957F;&#x5EA6;&#x5927;&#x4E8E; <code>max</code> &#xFF08;&#x7F13;&#x5B58;&#x957F;&#x5EA6;&#x8D85;&#x8FC7;&#x4E0A;&#x9650;&#xFF09;&#xFF0C;&#x5219;&#x79FB;&#x9664; <code>keys[0]</code> &#x7F13;&#x5B58;</li>
</ul>
<p>&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x6765;&#x81EA;&#x5DF1;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A; LRU &#x7B97;&#x6CD5;&#x5427;&#x26FD;&#xFE0F;&#x26FD;&#xFE0F;&#x26FD;&#xFE0F;</p>
<h3 id="&#x4E09;&#x3001;leetcode&#xFF1A;lru-&#x7F13;&#x5B58;&#x673A;&#x5236;">&#x4E09;&#x3001;leetcode&#xFF1A;LRU &#x7F13;&#x5B58;&#x673A;&#x5236;</h3>
<p>&#x8FD0;&#x7528;&#x4F60;&#x6240;&#x638C;&#x63E1;&#x7684;&#x6570;&#x636E;&#x7ED3;&#x6784;&#xFF0C;&#x8BBE;&#x8BA1;&#x548C;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A; LRU (&#x6700;&#x8FD1;&#x6700;&#x5C11;&#x4F7F;&#x7528;) &#x7F13;&#x5B58;&#x673A;&#x5236;&#x3002;&#x5B83;&#x5E94;&#x8BE5;&#x652F;&#x6301;&#x4EE5;&#x4E0B;&#x64CD;&#x4F5C;&#xFF1A; &#x83B7;&#x53D6;&#x6570;&#x636E; <code>get</code> &#x548C;&#x5199;&#x5165;&#x6570;&#x636E; <code>put</code> &#x3002;</p>
<p>&#x83B7;&#x53D6;&#x6570;&#x636E; <code>get(key)</code> - &#x5982;&#x679C;&#x5BC6;&#x94A5; ( <code>key</code> ) &#x5B58;&#x5728;&#x4E8E;&#x7F13;&#x5B58;&#x4E2D;&#xFF0C;&#x5219;&#x83B7;&#x53D6;&#x5BC6;&#x94A5;&#x7684;&#x503C;&#xFF08;&#x603B;&#x662F;&#x6B63;&#x6570;&#xFF09;&#xFF0C;&#x5426;&#x5219;&#x8FD4;&#x56DE; <code>-1</code> &#x3002;
&#x5199;&#x5165;&#x6570;&#x636E; <code>put(key, value)</code> - &#x5982;&#x679C;&#x5BC6;&#x94A5;&#x4E0D;&#x5B58;&#x5728;&#xFF0C;&#x5219;&#x5199;&#x5165;&#x6570;&#x636E;&#x3002;&#x5F53;&#x7F13;&#x5B58;&#x5BB9;&#x91CF;&#x8FBE;&#x5230;&#x4E0A;&#x9650;&#x65F6;&#xFF0C;&#x5B83;&#x5E94;&#x8BE5;&#x5728;&#x5199;&#x5165;&#x65B0;&#x6570;&#x636E;&#x4E4B;&#x524D;&#x5220;&#x9664;&#x6700;&#x4E45;&#x672A;&#x4F7F;&#x7528;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4ECE;&#x800C;&#x4E3A;&#x65B0;&#x6570;&#x636E;&#x7559;&#x51FA;&#x7A7A;&#x95F4;&#x3002;</p>
<p><strong>&#x8FDB;&#x9636;:</strong></p>
<p>&#x4F60;&#x662F;&#x5426;&#x53EF;&#x4EE5;&#x5728; <strong>O(1)</strong> &#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x5185;&#x5B8C;&#x6210;&#x8FD9;&#x4E24;&#x79CD;&#x64CD;&#x4F5C;&#xFF1F;</p>
<p><strong>&#x793A;&#x4F8B;:</strong></p>
<pre class="language-"><code>LRUCache cache = new LRUCache( 2 /* &#x7F13;&#x5B58;&#x5BB9;&#x91CF; */ );

cache.put(1, 1);
cache.put(2, 2);
cache.get(1);       // &#x8FD4;&#x56DE;  1
cache.put(3, 3);    // &#x8BE5;&#x64CD;&#x4F5C;&#x4F1A;&#x4F7F;&#x5F97;&#x5BC6;&#x94A5; 2 &#x4F5C;&#x5E9F;
cache.get(2);       // &#x8FD4;&#x56DE; -1 (&#x672A;&#x627E;&#x5230;)
cache.put(4, 4);    // &#x8BE5;&#x64CD;&#x4F5C;&#x4F1A;&#x4F7F;&#x5F97;&#x5BC6;&#x94A5; 1 &#x4F5C;&#x5E9F;
cache.get(1);       // &#x8FD4;&#x56DE; -1 (&#x672A;&#x627E;&#x5230;)
cache.get(3);       // &#x8FD4;&#x56DE;  3
cache.get(4);       // &#x8FD4;&#x56DE;  4
</code></pre><p>&#x524D;&#x9762;&#x5DF2;&#x7ECF;&#x4ECB;&#x7ECD;&#x8FC7;&#x4E86; <code>keep-alive</code> &#x4E2D;LRU&#x5B9E;&#x73B0;&#x6E90;&#x7801;&#xFF0C;&#x73B0;&#x5728;&#x6765;&#x770B;&#x8FD9;&#x9053;&#x9898;&#x662F;&#x4E0D;&#x662F;&#x5F88;&#x7B80;&#x5355;&#x1F60A;&#x1F60A;&#x1F60A;&#xFF0C;&#x53EF;&#x4EE5;&#x5C1D;&#x8BD5;&#x81EA;&#x5DF1;&#x89E3;&#x7B54;&#x4E00;&#x4E0B;&#x26FD;&#xFE0F;&#xFF0C;&#x7136;&#x540E;&#x601D;&#x8003;&#x4E00;&#x4E0B;&#x6709;&#x6CA1;&#x6709;&#x4EC0;&#x4E48;&#x7EE7;&#x7EED;&#x4F18;&#x5316;&#x7684;&#xFF01;&#x6B22;&#x8FCE;&#x63D0;&#x4F9B;&#x66F4;&#x591A;&#x7684;&#x89E3;&#x6CD5;</p>
<pre class="language-"><code class="lang-js"><span class="token keyword">function</span> <span class="token constant">LRU</span><span class="token punctuation">(</span><span class="token parameter">max</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>max <span class="token operator">=</span> max<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>cache <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token class-name">LRU</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> cache <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
      value <span class="token operator">=</span> cache<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
    cache<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    cache<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> cache <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>cache<span class="token punctuation">.</span>size <span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>max <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> keys <span class="token operator">=</span> cache<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      cache<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>keys<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    cache<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> lru <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LRU</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
lru<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lru<span class="token punctuation">.</span>cache<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>&#x7B54;&#x6848;&#x5DF2;&#x63D0;&#x4EA4;&#x5230; <a href="https://github.com/sisterAn/JavaScript-Algorithms/issues/7" target="_blank">#7</a></p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="从Chrome V8源码看JavaScript数组.html" class="navigation navigation-prev " aria-label="Previous page: 从Chrome V8源码看JavaScript数组">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="链表原来如此简单.html" class="navigation navigation-next " aria-label="Next page: 链表原来如此简单">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"LRU算法","level":"1.5.4","depth":2,"next":{"title":"链表原来如此简单","level":"1.5.5","depth":2,"path":"Algorithm/链表原来如此简单.md","ref":"Algorithm/链表原来如此简单.md","articles":[]},"previous":{"title":"从Chrome V8源码看JavaScript数组","level":"1.5.3","depth":2,"path":"Algorithm/从Chrome V8源码看JavaScript数组.md","ref":"Algorithm/从Chrome V8源码看JavaScript数组.md","articles":[]},"dir":"ltr"},"config":{"plugins":["github","donate","splitter","-anchor-navigation-ex","-sharing","sharing-plus","-highlight","prism","toggle-chapters","-lunr","-search","search-plus"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"prism":{"css":["prismjs/themes/prism.css"]},"github":{"url":"https://github.com/MarioGogogo"},"splitter":{},"sharing-plus":{"qq":false,"all":["facebook","google","twitter","instapaper","linkedin","pocket","stumbleupon"],"douban":false,"facebook":true,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":true,"messenger":false,"line":false,"vk":false,"pocket":true,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"donate":{"alipay":"","alipayText":"支付宝打赏","button":"赏","title":"","wechat":"http://7q5c2h.com1.z0.glb.clouddn.com/wechatpay.JPG","wechatText":"微信打赏"},"fontsettings":{"theme":"white","family":"serif","size":2},"anchor-navigation-ex":{"associatedWithSummary":false,"showLevel":true,"multipleH1":true,"mode":"float","pageTop":{"showLevelIcon":false,"level1Icon":"fa fa-hand-o-right","level2Icon":"fa fa-hand-o-right","level3Icon":"fa fa-hand-o-right"}},"sharing":{"qq":false,"all":["weibo","qq","qzone","google","douban"],"douban":false,"facebook":false,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":false,"messenger":false,"line":false,"vk":false,"pocket":false,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":true},"toggle-chapters":{},"search-plus":{}},"theme":"default","author":"WuXiaolong","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"👨🏽‍💻前端漫游指南","language":"zh-hans","links":{"sidebar":{}},"gitbook":"3.2.3","description":"http://h5web.cc/"},"file":{"path":"Algorithm/LRU算法.md","mtime":"2020-04-17T09:08:45.092Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-04-22T01:16:46.955Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-toggle-chapters/toggle.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

